<template>
  <div class="vc-table no-empty-block">
    <el-table
      ref="filesTable"
      :data="filesTableData"
      size="small"
      style="width: 100%"
      tooltip-effect="light"
      empty-text=" "
      stripe
    > 
      <el-table-column
        label="序号"
        type='index'
        align="center"
        width="50">
      </el-table-column>
      <el-table-column label="文件名" align="left" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <a 
            class="color-primary"
            style="cursor:pointer;text-decoration:none;line-height:30px;font-size:13px;"
            :href="scope.row.fileId ? `${uploadCfg.url}/dl/${scope.row.fileId}` : 'javascript:;'"
          >{{ scope.row.fileName }}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "downloadFile",
  props: {
    fileData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      filesTableData: [],
      fileList: [],
      loading: false,
      uploadData: {
        appId: this.$store.state.config.data['wjfwyyid'],
        timestamp: "",
        sig: ""
      }
    };
  },
  computed: {
    uploadCfg() {
      return {
        url: this.$store.state.config.data['wjfwqdz'] + '/yfs',
        secret: this.$store.state.config.data['wjfwyymy']
      };
    }
  },
  created() {
    this.findFileListById(); //根据id查询附件数据
  },
  watch: {
    fileData: {
      handler: this.findFileListById,
      deep: true
    }
  },
  methods: {
    findFileListById() {
      this.filesTableData = this.fileData.map(item => {
        return {
          fileId: item.attmtId,
          fileName: item.attmtName,
          fileSize: item.attmtSize,
          progressFlag: 2
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.vc-table {
  border-bottom: none !important;
}
</style>